<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Flex align-items 效果验证</title>
    <style>
      body {
        margin: 0;
        font: 14px/1.4 sans-serif;
        background: #f7f7f7;
      }
      h2 {
        margin: 20px 0 6px 10px;
        font-size: 16px;
        color: #333;
      }

      /* 统一 Flex 容器：固定高度，方便观察交叉轴对齐 */
      .box {
        display: flex; /* 开启 flex */

        width: 420px;
        height: 120px;
        margin: 10px;
        border: 3px solid #000;
        background: #fff;
        
        resize: both;
        overflow: hidden; /* 可拖动改变高度，实时看效果 */
        align-items: stretch; /* 默认先演示 stretch，手动改下面 5 个值验证 */
      }

      /* 子项：给定不同高度，方便看出对齐差异 */
      .item {
        width: 70px;
        margin: 5px;
        background: #2196f3;
        color: #fff;
        /* display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px; */
      }
      .h60 {
        height: 60px;
      }
      .h80 {
        height: 80px;
      }
      .h100 {
        height: 100px;
      }

      /* 5 种取值快速切换（把下面注释打开/关闭即可） */
      .ai-stretch {
        align-items: stretch;
      }
      .ai-start {
        align-items: flex-start;
      }
      .ai-end {
        align-items: flex-end;
      }
      .ai-center {
        align-items: center;
      }
      .ai-baseline {
        align-items: baseline;
      }
    </style>
  </head>
  <body>
    <h2>align-items:stretch（默认，高度撑满交叉轴）</h2>
    <div class="box ai-stretch">
      <div class="item h60">1</div>
      <div class="item h80">2</div>
      <div class="item h100">3</div>
      <div class="item">4<br />基线</div>
    </div>

    <h2>align-items:flex-start</h2>
    <div class="box ai-start">
      <div class="item h60">1</div>
      <div class="item h80">2</div>
      <div class="item h100">3</div>
      <div class="item">4<br />基线</div>
    </div>

    <h2>align-items:flex-end</h2>
    <div class="box ai-end">
      <div class="item h60">1</div>
      <div class="item h80">2</div>
      <div class="item h100">3</div>
      <div class="item">4<br />基线</div>
    </div>

    <h2>align-items:center</h2>
    <div class="box ai-center">
      <div class="item h60">1</div>
      <div class="item h80">2</div>
      <div class="item h100">3</div>
      <div class="item">4<br />基线</div>
    </div>

    <h2>align-items:baseline（以第一行文字基线对齐）</h2>
    <div class="box ai-baseline">
      <div class="item h60">1</div>
      <div class="item h80">2</div>
      <div class="item h100">3</div>
      <div class="item">4<br />基线</div>
    </div>
  </body>
</html>
